import React, {useState} from 'react'
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import { Menu } from 'antd';
import { useNavigate } from 'react-router-dom';
const items = [
    {
        key: '1',
        icon: <MailOutlined />,
        label: '基础档案',
        children: [
            {
                key: '11',
                label: '机构人员',
            },
            {
                key: '12',
                label: '仓库存货',
                children: [
                    {
                        key: '231',
                        label: '仓库设置',
                    },
                    {
                        key: '232',
                        label: '仓库档案',
                    },
                    {
                        key: '233',
                        label: '存货SKU表',
                    },
                    {
                        key: '234',
                        label: '库存套餐',
                    },
                    {
                        key: '235',
                        label: '库存分类',
                    },
                    {
                        key: '236',
                        label: '单位换算',
                    },
                ],
            },
            {
                key: '13',
                label: '往来单位',
            },
            {
                key: '14',
                label: '打印设置',
            },
        ],
    },
    {
        key: '2',
        icon: <AppstoreOutlined />,
        label: '采购管理',
        children: [
            {
                key: '21',
                label: '采购 1',
            },
            {
                key: '22',
                label: '采购 2',
            },
            {
                key: '23',
                label: '采购 3',
            },
            {
                key: '24',
                label: '采购4',
                children: [
                    {
                        key: '241',
                        label: '采购 11',
                    },
                    {
                        key: '242',
                        label: '采购 12',
                    },
                    {
                        key: '243',
                        label: '采购 13',
                    },
                ],
            },
        ],
    },
    {
        key: '3',
        icon: <SettingOutlined />,
        label: '销售管理',
        children: [
            {
                key: '31',
                label: '库存管理',
            },
            {
                key: '32',
                label: '保单查询',
            },
            {
                key: '33',
                label: '系统管理',
            },
            {
                key: '34',
                label: '其他设置',
            },
        ],
    },
];
const getLevelKeys = (items1) => {
    const key = {};
    const func = (items2, level = 1) => {
        items2.forEach((item) => {
            if (item.key) {
                key[item.key] = level;
            }
            if (item.children) {
                func(item.children, level + 1);
            }
        });
    };
    func(items1);
    return key;
};
const levelKeys = getLevelKeys(items);


export default function Side() {
    const navigate = useNavigate()
    const [stateOpenKeys, setStateOpenKeys] = useState(['1', '12']);
    const onOpenChange = (openKeys) => {
        const currentOpenKey = openKeys.find((key) => stateOpenKeys.indexOf(key) === -1);
        // open
        if (currentOpenKey !== undefined) {
            const repeatIndex = openKeys
                .filter((key) => key !== currentOpenKey)
                .findIndex((key) => levelKeys[key] === levelKeys[currentOpenKey]);
            setStateOpenKeys(
                openKeys
                    // remove repeat key
                    .filter((_, index) => index !== repeatIndex)
                    // remove current level all child
                    .filter((key) => levelKeys[key] <= levelKeys[currentOpenKey]),
            );
        } else {
            // close
            setStateOpenKeys(openKeys);
        }
    };
    const check = (value) =>{
        if(value.key === '232'){
            navigate('/list')
        }else{
            navigate('/non')
        }
    }
    return (
        <Menu
            mode="inline"
            defaultSelectedKeys={['231']}
            openKeys={stateOpenKeys}
            onOpenChange={onOpenChange}
            style={{
                width: "100%",
            }}
            items={items}
            onClick={(e)=>{check(e)}}
        />
    );
}
